<template>
  <div class="app-container">
    <div class="block">
      <p>分组列表</p>
      <el-button @click="append">新增分组</el-button>
      <el-table :data="topics" width="800px">
        <el-table-column prop="topicName" label="分组名" width="220"></el-table-column>
        <el-table-column prop="parentName" label="主题" width="200"></el-table-column>
        <el-table-column prop="topicDesc" label="描述" width="120"></el-table-column>
        <el-table-column prop="articleTotal" label="文章数" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="left" width="240" align="left">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editTopic(scope.row)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="remove(scope.row.topicId,scope.row.topicName)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="新增分组"
      :visible.sync="addFlag"
      width="400px"
      center
      close-on-click-modal="false"
    >
      <el-form :model="editData">
        <el-form-item label="分组名称" label-width="5em">
          <el-input v-model="editData.topicName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分组" label-width="5em">
          <el-select v-model="editData.parentId" placeholder="请选择">
            <template v-for="(topic, index) in ptopics">
              <el-option :label="topic.topicName" :value="topic.topicId" :key="index"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="分组描述" label-width="5em">
          <el-input type="textarea" v-model="editData.topicDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="addFlag = false, saveTopic()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑分组" :visible.sync="editFlag" width="30%" center>
      <span>输入新的分组名</span>
      <el-form :model="editData">
        <el-form-item label="分组名称" label-width="5em">
          <el-input v-model="editData.topicName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分组" label-width="5em">
          <el-select v-model="editData.parentId" placeholder="请选择">
            <template v-for="(topic, index) in ptopics">
              <el-option :label="topic.topicName" :value="topic.topicId" :key="index"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="分组描述" label-width="5em">
          <el-input type="textarea" v-model="editData.topicDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="editFlag = false,updTopic()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import { qryArticles, updAtcState, delArticle } from '@/api/apis'
import group from '../../layout/components/group'
import { addTopic, qryTopics, delTopic, updTopic } from '@/api/topicApis'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      topics: [],
      ptopics: [],
      add: false,
      addTpcName: '',
      addFlag: false,
      editFlag: false,
      editData: {
        topicName: '请填写',
        topicId: '',
        parentId: ''
      },
      active: '-1'
    }
  },
  components: {
    group
  },
  mounted() {
    this.loadTopics()
  },
  created() {
    console.log(this.BASE_ADDR)
    // this.fetchData()
  },
  methods: {
    loadTopics() {
      qryTopics({ tree: 0 }).then(res => {
        this.topics = res.data
      })
    },
    saveTopic() {
      if (this.editData.topicName == '') {
        this.editData = {
          topicName: '请填写',
          topicId: '',
          parentId: ''
        }
        return
      }
      addTopic(this.editData).then(res => {
        let data = res.data
        this.loadTopics()
      })
      this.editData = {
        topicName: '请填写',
        topicId: '',
        parentId: ''
      }
    },
    remove(topicId, topicName) {
      if (topicId == '') return
      const vue = this
      this.$layer.confirm(
        '确定删除分组' + topicName + '?',
        {
          // icon: 3,
          title: '删除分组',
          btn: ['删除', '取消'] //按钮
        },
        function(index) {
          delTopic({ topicId: topicId }).then(res => {
            vue.loadTopics()
            vue.editFlag = false
            vue.$layer.close(index)
            vue.$layer.alert('删除成功')
          })
        },
        function(index) {
          vue.$layer.close(index)
          vue.editFlag = false
        }
      )
    },
    editTopic(topic) {
      qryTopics({ tree: 1, level: 1 }).then(res => {
        this.ptopics = res.data
        this.editFlag = true
        this.editData = topic
      })
    },
    updTopic() {
      if (this.editData.topicName == '' || this.editData.topicName == '请填写')
        return
      updTopic(this.editData).then(res => {
        this.loadTopics()
        this.$layer.msg('操作成功')
      })
    },
    append() {
      this.addFlag = true
      this.editData = {
        topicName: '请填写',
        topicId: '',
        parentId: ''
      };
      qryTopics({ tree: 1, level: 1 }).then(res => {
        this.ptopics = res.data
      })
      //   const newChild = { topicId: 0, topicName: 'testtest', children: [] }
      //   if (!data.children) {
      //     this.$set(data, 'children', [])
      //   }
      //   data.children.push(newChild)
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      )
    }
  }
}
</script>
